import axios from "axios";
import { nanoid } from "nanoid";

export default {
    namespaced: true, // 命名空间默认为false，必须改为true
    state: {
        list: [],
        title: "",
        checkedAll: false
    },
    mutations: {
        // 初始化数据
        setListInit(state, value) {
            state.list = value;
        },
        // 添加任务
        addItem(state, value) {
            // 添加之前需要判断是否已经有任务，如果没有，则将全选取消选中,否则会有bug
            if (state.list.length === 0) {
                state.checkedAll = false
            }

            // 添加任务
            state.list.unshift({
                id: nanoid(),
                title: value,
                done: false
            })
        },
        // 删除
        deleteItem(state, id) {
            state.list = state.list.filter(item => item.id !== id)
            // 同时判断是否需要全选按钮选中
            state.checkedAll = state.list.every(item => item.done)
        },
        // 点击任务选中/取消
        checkedChange(state, todo) { // 参数只能有两个
            todo.done = !todo.done;
            state.list.forEach(item => {
                if (item.id === todo.id) {
                    item = todo
                }
            });

            // 同时判断是否需要全选按钮选中
            state.checkedAll = state.list.every(item => item.done)
        },
        // 点击全选按钮时
        changeAll(state) {
            state.checkedAll = !state.checkedAll;
            state.list.forEach(item => item.done = state.checkedAll)
        },
        // 清除所有选中
        clearAllDone(state) {
            state.list = state.list.filter(item => !item.done);
            // 清除之后需要判断是否还存在任务，如果没有，则将全选取消选中
            if (state.list.length === 0) {
                state.checkedAll = false
            }
        }
    },
    actions: {
        // 异步请求数据
        async asyncGetTodoList(context) {
            const result = await axios.get('./todolist.json');
            console.log(result.data);
            context.commit("setListInit", result.data)
        }
    },
    getters: {
        isHave(state) {
            return state.list.length === 0 ? true : false
        },
        checkedTodo(state) {
            return state.list.filter(item => item.done).length
        }
    }
}